<template>
  <div class="comment-form">
    <el-input
        v-model="content"
        type="textarea"
        :rows="3"
        placeholder="写下你的评论..."
        resize="none"
    />
    <div class="form-actions">
      <div v-if="parentId" class="reply-info">
        正在回复
        <el-button type="danger" @click="cancel">取消回复</el-button>
      </div>
      <el-button
          type="primary"
          @click="submit"
          :disabled="!content.trim()"
      >
        提交评论
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'

const props = defineProps({
  parentId: Number
})

const emit = defineEmits(['submit-comment', 'cancel-reply'])
const content = ref('')

const submit = () => {
  emit('submit-comment', content.value.trim())
  content.value = ''
}

const cancel = () => {
  emit('cancel-reply')
}
</script>

<style scoped>
.comment-form {
  margin-bottom: 30px;
}
.form-actions {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.reply-info {
  color: #666;
  font-size: 14px;
}
</style>